<!--  -->
<template>
  <view class="card_content">
      <view class="main_content">
      
      <!-- 有名片 -->
      <view class="userCard"  >
        <view class="userInfo">
          <view class="user_portrait">
            <image src="../../static/userCard/editCard.png" mode="" ></image>
            <view class="message">
              <view class="company_name">
                  公司名称：<text>未填写</text>
              </view>
              <view class="person">
                <view class="name">
                    姓名：<text>未填写</text>
                </view>
                <view class="position">
                    职位：<text>未填写</text>
                </view>
              </view>
              <span class="synopsis">
                  简介：<text>未填写</text>
              </span>
            </view>
          </view>
          <view class="goto">
            <!-- <image src="../../static/userCard/go.png" mode=""></image> -->
          </view>
        </view>
        <!-- 用户地址 -->
        <view class="user_address">
          <view class="userphone">
            <span><image src="../../static/userCard/phone.png" mode=""></image><text>未填写</text></span
            ><span><image src="../../static/userCard/envelope.png" mode=""><text>未填写</text></span>
          </view>
          <view class="address">
            <image
              src="../../static/userCard/location.png"
              mode=""
            /><text>未填写</text>
          </view>
        </view>
      </view>
    </view>
    <view class="userOption" @tap="createCard">
          创建名片
      </view>
      <Festival></Festival>
  </view>
</template>

<script>
import {  userInfo } from "../../util/api/user.js"
export default {
  data() {
    //这里存放数据
    return {
        userId:'' // 用户ID
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      createCard(){
          // 获取token 
         let token =  this.$getToken()
         if(!token){
            uni.setStorageSync("pageUrl", window.location.href);
            uni.navigateTo({
              url: '/pages/login/index'
            });
            return
         }
         
        
        if(this.userId){
            uni.navigateTo({
               url: '/pages/person/editCard?id='+this.userId+'&isEdit=0'
          });
        }
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      userInfo().then(res=>{
          if(res.code==0){
            this.userId =   res.result.id
          }
      })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类

.userCard {
    padding:0 30rpx;
    border-radius: 10rpx;
    // width: 690rpx;
    height: 385rpx;
    background-size: 100% 100%;
    background-image: url(../../static/userCard/card_bg.png);
    .userInfo {
      padding: 40rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .user_portrait {
        display: flex;
        align-items: center;
        image {
          width: 120rpx;
          height: 120rpx;
        }
        .message {
          margin-left: 20rpx;
          .company_name {
            color: #aaaaaa;
            font-size: 22rpx;
          }
          .person {
              display: flex;
              align-items: center;
              height: 70rpx;
            .name {
              
              font-size: 30rpx;
            }
            .position {
              color: #6e6e6f;
              margin-left: 30rpx;
            }
          }
          .synopsis {
            color: #aaaaaa;
            font-size: 24rpx;
          }
        }
      }
      .goto {
        image {
          width: 16rpx;
          height: 24rpx;
        }
      }
    }
    .user_address {
      .userphone {
          display: flex;
          align-items: center;
        span {
          color: #333333;
          font-size:20rpx;
          margin-right: 30rpx;
          image{
			margin-right: 30rpx;
            width: 18rpx;
            height: 22rpx;
          }
        }
      }
      .address {
        margin-top:20rpx;
        color: #333333;
        font-size: 24rpx;
        image {
			
          margin-right: 20rpx;
          width: 18rpx;
          height: 22rpx;
        }
      }
    }
    
}
.userOption{
    margin:20px 30rpx;
    height: 100rpx;
    display: flex;
    align-items:  center;
    justify-content: center;
    background-color:#1f7dff;
    color:#fff;
}
</style>
